<template>
  <div class="artist-category">
	<base-info :baseInfo="baseInfo"></base-info>
	  <el-tabs v-model="activeName" @tab-click="handleClick">
	    <el-tab-pane label="歌曲列表" name="first">
			<song-list :songsList="songsList"></song-list>
		</el-tab-pane>
		<el-tab-pane name="second">
		  <span slot="label">评论({{total}})</span>
		  <comment :commentsList="commentsList" :id="commentParams.id"></comment>
		  <el-pagination
		     @size-change="handleSizeChange"
		     @current-change="handleCurrentChange"
		     :current-page="commentParams.offset"
		     :page-sizes="[20,30,40]"
		     :page-size="commentParams.limit"
		     layout="total, sizes, prev, pager, next, jumper"
		     :total="total">
		   </el-pagination>
		</el-tab-pane>
	    <el-tab-pane label="收藏者" name="third">
			<subscribers :subscribersList="subscribersList"></subscribers>
		</el-tab-pane>
	  </el-tabs>
  </div>
</template>

<script>

import {_getMusicListDetail,_getSongsDetail,_getComment,_getSubscribers,songDetail} from 'network/detail.js'
import BaseInfo from './childsPage/base-info.vue'
import Comment from './childsPage/comment.vue'
import Subscribers from './childsPage/subscribers.vue'
import SongList from 'components/common/song-list/song-list'

export default {
  name:'MusicListDetail',
  components:{BaseInfo,SongList,Comment,Subscribers},
  data(){
    return{
		baseInfo:{},
		songsList:[],
		activeName:'first',
		commentParams:{
			id:0,
			offset:1,
			limit:20,
		},
		commentsList:[],
		songCount:null,
		total:null,
		subscribersParams:{
			id:0,
			offset:1,
			limit:30,
		},
		subscribersList:[]
    }
  },
  created(){
	  this.getList();
  },
  methods:{
	  getList(){
		  const id = this.$route.params.id
		 _getMusicListDetail(id).then(res=>{

			 this.baseInfo = res.data.playlist
		     let trackIds = res.data.playlist.trackIds
			 
			 for(let i in trackIds){
				let id = trackIds[i].id
				_getSongsDetail(id).then(res=>{
					  let song = new songDetail(res.data.songs);
					  this.songsList.push(song)
					  // console.log(this.songsList)
					  this.songCount = res.data.total;
					  console.log(this.songCount)
				})
			 }
		 }) 
	  },
	  handleClick(tab, event) {
		 if(tab.name==="second"){
			this.getComment()
		 }
	    if(tab.name==="third"){
	    	this.subscribersParams.id=this.$route.params.id
	    	_getSubscribers(this.subscribersParams).then(res=>{
				console.log(res)
	    	 this.subscribersList = res.data.subscribers
	    	 // this.total = res.data.total
	    	})
	    }
	  },
	  getComment(){
		  this.commentParams.id=this.$route.params.id
		  _getComment(this.commentParams).then(res=>{
		  		this.commentsList = res.data.comments
		  		this.total = res.data.total
		  })
	  },
	  handleSizeChange(val){
		 this.commentParams.offset = 1;
		 this.commentParams.limit = val;
		 this.getComment();
	  },
	  handleCurrentChange(val){
		this.commentParams.offset = val;
		this.getComment();
	  }
  }
}
</script>

<style lang="less" scoped>
.artist-category{
	padding: 10px 30px 0 30px;
}

/deep/ .el-button {
	padding: 0;
}
</style>